<template>
  <div>
    <mt-header :title="name" fixed style="background-color: #ff4d4f;color:#fff;">
      <router-link :to="{path:'/Statistics',query:{ selected:selected }}" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="main">
      <div class="list_left" ref="wrapper" :style="{ height: (wrapperHeight) + 'px' }">
        <mt-loadmore
          class="loadmore"
          :top-method="loadTop"
          :bottom-method="loadBottom"
          :bottom-all-loaded="allLoaded"
          ref="loadmore"
          :autoFill="isAutoFill"
        >
          <div style="height:100%;">
            <ul>
              <li v-for="(item,index) in list" :key="index">
                <div>
                  <span>{{item.Name}}</span>
                  <span class="Signed">{{item.Signed}}</span>
                </div>
              </li>
            </ul>
          </div>
        </mt-loadmore>
      </div>
    </div>
  </div>
</template>

<script>
import https from "../../utils/http.js";
export default {
  data() {
    return {
      id: "",
      selected: 0,
      Grade: "",
      list: [],
      name: "",
      PageIndex: 1,
      PageSize: 10,
      PageTotal: 0,
      allLoaded: false,
      isAutoFill: false,
      wrapperHeight: 0
    };
  },
  mounted() {
    this.get_list();
    this.wrapperHeight =
      document.documentElement.clientHeight -
      this.$refs.wrapper.getBoundingClientRect().top;
    console.log(this.wrapperHeight);
  },
  methods: {
    loadTop() {
      this.get_list();
    },
    loadBottom() {
      console.log("1111");
      this.loadMore();
    },
    loadMore() {
      if (this.PageIndex > this.PageTotal) {
        Toast("已经到底了");
        this.$refs.loadmore.onBottomLoaded();
      } else {
        https({
          method: "post",
          url: "/api/v1/Systems/WxClassSubPage",
          data: {
            ActivityID: this.id,
            Grade: this.Grade,
            PageIndex: this.PageIndex,
            PageSize: this.PageSize
          }
        })
          .then(res => {
            if (res.Code == 200) {
              this.list = this.list.concat(res.Data.RecordList);
              this.PageIndex++;
              this.$refs.loadmore.onBottomLoaded();
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    get_list() {
      https({
        method: "post",
        url: "/api/v1/Systems/WxClassSubPage",
        data: {
          ActivityID: this.id,
          Grade: this.Grade,
          PageIndex: 1,
          PageSize: 10
        }
      })
        .then(res => {
          if (res.Code == 200) {
            this.list = res.Data.RecordList;
            this.PageIndex = res.Data.PageIndex;
            this.PageTotal = res.Data.PageTotal;
            this.PageIndex = 2;
            this.$refs.loadmore.onTopLoaded();
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this.id = this.$route.query.id;
    console.log(this.id);
    this.selected = this.$route.query.selected;
    this.Grade = this.$route.query.Grade;
    this.name = this.$route.query.name;
    // this.token = localStorage.getItem("token");
  }
};
</script>

<style scoped lang="less">
.main {
  width: 100%;
  height: 100vh;
  padding-top: 2.5rem;
  box-sizing: border-box;
  background: #fff;
}
.list_left {
  width: 100%;
  overflow: scroll;

  height: 100%;
  ul {
    margin: 0;
    padding: 0;
    height: 100%;
    li {
      list-style: none;
      width: 95%;
      margin: 0 auto;
      height: 4rem;
      line-height: 4rem;
      background: #fff;
      border-bottom: 1px solid #eee;
      font-size: 0.9rem;

      box-sizing: border-box;
      div {
        line-height: 4rem;
      }
      .Signed {
        float: right;
      }
    }
  }
}
</style>